<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            position: relative;
            width: 610px;
            height: 610px;
            background-color: #fff;
            margin: 100px auto;
            border: 4px solid #eee;
            background-color: red;
        }

        .father div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #eee;
            /* background-position-x: 200px;
            background-position-y: 200px; */
            background-image: url(./img1.jpg);
        }

        .barrier {
            top: 400px;
            left: 400px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
    </div>
    <script src='./jquery-1.12.4.js'></script>
    <script>
        //函数求盒子定位(x,y)
        let getPointX = function (order) {
            let x = 0
            order % 3 == 1 ? x = 0 : null
            order % 3 == 2 ? x = 200 : null
            order % 3 == 0 ? x = 400 : null
            return x
        }
        let getPointY = function (order) {
            let y = 0
            if (order <= 3) {
                y = 0
                return y
            } else if (order <= 6) {
                y = 200
                return y
            } else if (order <= 9) {
                y = 400
                return y
            }
        }
        //图片排布
        for (let i = 0; i < $('.father div').length; i++) {
            $('.box').eq(i).css({
                top: getPointY(i + 1),
                left: getPointX(i + 1),
            }).css(
                'background-position-x', -getPointX(i + 1)
            ).css(
                'background-position-y', -getPointY(i + 1)
            ).attr('data-rank', i)
        }

        //插入障碍方块
        $('.father').append(`<div class= "box barrier"></div>`)
        $('.barrier').css('background', '#666')

        //图片打乱方式一，改变图片top，left值（不利于判断图片拼成）
        {
            // let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]
            // arr.sort(function () {
            //     return Math.random() > .5 ? -1 : 1;
            // })
            // console.log(arr);
            // for (let i = 0; i < arr.length; i++) {
            //     $('.box').eq(i).css({
            //         top: getPointY(arr[i] + 1),
            //         left: getPointX(arr[i] + 1),
            //     })
            // }
        }

        //图片打乱方式二 将获取到的dom对象数组打乱，(打乱存在无解的情况)
        { //1,将伪数组转成真数组后打乱顺序
            // let arr = [...$('.box')]
            // arr.sort(function () {
            //     return Math.random() > .5 ? -1 : 1;
            // })
            // //2,清空父盒子
            // $('.father').html('')
            // //将jq对象数组插入父盒子中-------更改节点位置。利于判断图片拼成
            // for (let i = 0; i < arr.length; i++) {
            //     $('.father').append(arr[i])
            // }
            // for (let i = 0; i < $('.box').length; i++) {
            //     $('.box').eq(i).css({
            //         top: getPointY(i + 1),
            //         left: getPointX(i + 1),
            //     })
            // }
            //
        }

        //小盒子重新定位函数(确保节点与其相对位置对应)
        let change = function () {
            for (let i = 0; i < $('.box').length; i++) {
                $('.box').eq(i).css({
                    top: getPointY(i + 1),
                    left: getPointX(i + 1),
                })
            }
        }

        //键盘交互
        //按键'上'交互函数
        let up = function () {
            $('.box').eq($('.barrier').index() + 3).after($('.barrier'))
            $('.box').eq($('.barrier').index() - 3).before($('.barrier').prev())
            change()
        }
        //按键'下'交互函数
        let down = function () {
            $('.box').eq($('.barrier').index() - 3).before($('.barrier'))
            $('.box').eq($('.barrier').index() + 3).after($('.barrier').next())
            change()
        }
        //按键'左'交互函数
        let left = function () {
            $('.barrier').next().after($('.barrier'))
            change()
        }
        //按键'右'交互函数
        let right = function () {
            $('.barrier').prev().before($('.barrier'))
            change()
        }
        //图片打乱方式三 机械打乱(上下左右随机，)
        // let operation = ['up', 'down', 'left', 'right'] //--对应上右下左
        let ran
        for (let i = 0; i < 50; i++) {
            ran = parseInt(Math.random() * 4)
            if (ran == 0) {
                up()
            }
            if (ran == 1) {
                down()
            }
            if (ran == 2) {
                left()
            }
            if (ran == 3) {
                right()
            }
        }
        //主体交互
        $(window).keydown(function (e) {
            if (e.keyCode == 39 && $('.barrier').prev() && $('.barrier').index() % 3 != 0) {
                right()
            }
            if (e.keyCode == 37 && $('.barrier').next() && $('.barrier').index() % 3 != 2) {
                left()
            }
            if (e.keyCode == 40 && $('.barrier').prev().prev().prev() && $('.barrier').index() >= 3) {
                down()
            }
            if (e.keyCode == 38 && $('.barrier').next().next().next() && $('.barrier').index() <= 5) {
                up()
            }

            //判断拼图顺序正确（理论方案：遍历方块，判断自定义属性的顺序）

            let arr = []
            for (let i = 0; i < $('.box').length; i++) {
                arr.push($('.box').eq(i).attr('data-rank'))
            }
            let rank = [...arr]
            let isOk = arr.sort(function (a, b) {
                return a - b
            })
            console.log(rank.toString(), isOk.toString());
            if (rank.toString() == isOk.toString()) {
                alert('成功')
            }

            { // let timeId = null
                // timeId = setInterval(function () {
                //     let arr = []
                //     for (let i = 0; i < $('.box').length; i++) {
                //         arr.push($('.box').eq(i).attr('data-rank'))
                //     }
                //     let rank = [...arr]
                //     let isOk = arr.sort(function (a, b) {
                //         return a - b
                //     })
                //     console.log(rank.toString(), isOk.toString());
                //     if (rank.toString() == isOk.toString()) {
                //         alert('成功')
                //     }
                // }, 200)
                // clearInterval(timeId)
            }

        })
    </script>
</body>

</html>